ckeditor5

What is ckeditor5?

CKEditor 5 is a modern JavaScript rich text editor with a modular architecture. It offers a wide range of features and is highly customizable, making it suitable for various types of content editing needs.

What are ckeditor5's main functionalities?

Basic Text Editing

This code initializes a basic CKEditor 5 instance with classic build, allowing users to perform basic text editing tasks such as bold, italic, and underline.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.create(document.querySelector('#editor'))
  .then(editor => {
    console.log('Editor was initialized', editor);
  })
  .catch(error => {
    console.error(error);
  });

Custom Plugins

This code demonstrates how to initialize CKEditor 5 with custom plugins. In this example, only the Bold and Italic plugins are included, and the toolbar is customized to show only these options.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [Essentials, Bold, Italic],
  toolbar: ['bold', 'italic']
})
  .then(editor => {
    console.log('Editor was initialized with custom plugins', editor);
  })
  .catch(error => {
    console.error(error);
  });

Real-time Collaboration

This code initializes CKEditor 5 with real-time collaboration features, allowing multiple users to edit the same document simultaneously and see each other's changes in real-time.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [RealTimeCollaborativeEditing, RealTimeCollaborativeComments],
  toolbar: ['comment', 'trackChanges']
})
  .then(editor => {
    console.log('Editor was initialized with real-time collaboration', editor);
  })
  .catch(error => {
    console.error(error);
  });

Other packages similar to ckeditor5

tinymce

TinyMCE is another popular rich text editor that offers a wide range of features and customization options. It is known for its ease of integration and extensive plugin library. Compared to CKEditor 5, TinyMCE has a more traditional architecture but offers similar functionalities.

quill

Quill is a lightweight, open-source rich text editor with a focus on simplicity and extensibility. It provides a clean API and is highly customizable. While it may not have as many built-in features as CKEditor 5, it is a good choice for projects that require a simple and flexible editor.

draft-js

Draft.js is a rich text editor framework for React, developed by Facebook. It provides a lot of flexibility and control over the editor's behavior and appearance. Unlike CKEditor 5, which is a complete solution, Draft.js is more of a toolkit for building custom editors.

README

CKEditor 5

A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.

Table of contents

• Quick start
  • CKEditor 5 builds
  • CKEditor 5 Framework
• Documentation and FAQ
• Contributing and project organization
  • Ideas and discussions
  • Development
  • Reporting issues and feature requests
• Releases
• Packages
  • Core libraries
  • Builds
  • Features
  • Editors
  • Themes
• License

Quick start

CKEditor 5 builds

CKEditor 5 builds are a set of ready-to-use rich text editors. Every "build" provides a single type of editor with a set of features and a default configuration.

The following CKEditor 5 builds are currently available:

• Classic editor
• Inline editor
• Balloon editor
• Balloon block editor
• Document editor

Example

Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:

1. Load the desired editor via the <script> tag.
2. Call the static create() method to create the editor.

In your HTML page add an element that CKEditor should replace:

<div id="editor"></div>

Load the classic editor build (you can choose between CDN, npm and zip downloads):

<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>

Call the ClassicEditor.create() method:

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

You’re ready to go!

To find out how to start with other builds check the Quick start guide in the CKEditor 5 documentation.

CKEditor 5 Framework

CKEditor 5 builds allow you to quickly and easily initialize one of the many types of editors in your application. At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions.

To find out how to start building your own editor from scratch go to CKEditor 5 Framework overview section of CKEditor 5 documentation.

Documentation and FAQ

To find out more see the following CKEditor 5 documentation sections:

• API documentation
• CKEditor 5 Framework documentation
• CKEditor 5 builds documentation
• CKEditor 5 Features documentation
• CKEditor 5 Examples

The documentation is far from being complete and will be constantly evolving (as will the editor) until it is ready for v1.0.0.

For FAQ please go to the CKEditor Ecosystem help center. For a high-level overview of the project see the CKEditor Ecosystem website.

Contributing and project organization

Ideas and discussions

The development repository of CKEditor 5 is located at https://github.com/ckeditor/ckeditor5. This is the best place for bringing opinions and contributions. Letting the core team know if they are going in the right or wrong direction is great feedback and will be much appreciated!

Development

CKEditor 5 is a modular, multi-package, monorepo project. It consists of several packages that create the editing framework, based on which the feature packages are implemented.

The ckeditor5 repository is the place that centralizes the development of CKEditor 5. It bundles different packages into a single place, adding the necessary helper tools for the development workflow, like the builder and the test runner. Basic information on how to set up the development environment can be found in the documentation.

See the official contributors' guide to learn how to contribute your code to the project.

Reporting issues and feature requests

Each repository handles its issues independently. However, it is recommended to report issues in this repository unless you know to which specific repository the issue belongs.

Read more on the Support page.

Releases

See CKEditor 5 release blog posts on the CKEditor blog.

Packages

Core libraries

Name	Version	Description
@ckeditor/ckeditor5-engine		The editing engine.
@ckeditor/ckeditor5-core		The core editor architecture.
@ckeditor/ckeditor5-ui		The editor UI library.
@ckeditor/ckeditor5-utils		The editor utilities library.
@ckeditor/ckeditor5-upload		The file upload utilities.
@ckeditor/ckeditor5-widget		The widget API.
@ckeditor/ckeditor5-watchdog		The watchdog feature, which keeps CKEditor 5 editors running.
@ckeditor/ckeditor5-cloud-services		CKEditor 5's Cloud Services integration layer.

Builds

Name	Version	Description
@ckeditor/ckeditor5-build-classic		The classic editor build.
@ckeditor/ckeditor5-build-inline		The inline editor build.
@ckeditor/ckeditor5-build-balloon		The balloon editor (Medium-like) build.
@ckeditor/ckeditor5-build-balloon-block		The balloon editor with a block toolbar (Slack–like) build.
@ckeditor/ckeditor5-build-decoupled-document		The document editor build, featuring the decoupled UI editor implementation.

Features

Name	Version	Description
@ckeditor/ckeditor5-adapter-ckfinder		The CKFinder adapter for features which require upload capabilities (e.g. image upload).
@ckeditor/ckeditor5-alignment		The text alignment feature.
@ckeditor/ckeditor5-autoformat		The autoformatting feature. Replaces predefined characters with a corresponding format (e.g. **foo** becomes bold <strong>foo</strong>).
@ckeditor/ckeditor5-autosave		The autosave feature. Makes it easy to automatically save the data to the backend.
@ckeditor/ckeditor5-basic-styles		The bold, italic, underline and code features.
@ckeditor/ckeditor5-block-quote		The block quote feature.
@ckeditor/ckeditor5-ckfinder		The CKFinder file browser integration.
@ckeditor/ckeditor5-clipboard		The clipboard integration.
@ckeditor/ckeditor5-code-block		The code block feature.
@ckeditor/ckeditor5-enter		The Enter key feature.
@ckeditor/ckeditor5-easy-image		Easy Image with CKEditor Cloud Services feature.
@ckeditor/ckeditor5-find-and-replace		The find and replace feature.
@ckeditor/ckeditor5-font		The font size and font family features.
@ckeditor/ckeditor5-heading		The heading feature.
@ckeditor/ckeditor5-highlight		The highlight feature (markers and pens).
@ckeditor/ckeditor5-horizontal-line		The horizontal rule feature.
@ckeditor/ckeditor5-html-embed		The HTML embed feature.
@ckeditor/ckeditor5-html-support		The General HTML Support feature.
@ckeditor/ckeditor5-image		The image feature. Supports image styles, captioning, upload, resizing, and more.
@ckeditor/ckeditor5-indent		The indentation (of lists and blocks) feature.
@ckeditor/ckeditor5-language		The text part language feature.
@ckeditor/ckeditor5-link		The link feature.
@ckeditor/ckeditor5-list		The numbered and bulleted lists feature.
@ckeditor/ckeditor5-markdown-gfm		The GitHub-flavored Markdown data processor.
@ckeditor/ckeditor5-media-embed		The media embed feature.
@ckeditor/ckeditor5-mention		The mention feature (autocomplete `@mentions`, `#tags`, etc.).
@ckeditor/ckeditor5-page-break		The page break feature.
@ckeditor/ckeditor5-paragraph		The paragraph feature.
@ckeditor/ckeditor5-paste-from-office		The Paste from Office (Word, Excel, Google Docs, etc.) plugin.
@ckeditor/ckeditor5-remove-format		The remove format feature.
@ckeditor/ckeditor5-restricted-editing		The restricted editing feature.
@ckeditor/ckeditor5-select-all		The "select all" feature.
@ckeditor/ckeditor5-source-editing		The source editing feature.
@ckeditor/ckeditor5-special-characters		The special characters feature.
@ckeditor/ckeditor5-table		The table feature.
@ckeditor/ckeditor5-typing		The typing and deleting features.
@ckeditor/ckeditor5-undo		The undo feature.
@ckeditor/ckeditor5-word-count		The word count feature.

Editors

Name	Version	Description
@ckeditor/ckeditor5-editor-classic		The classic editor implementation.
@ckeditor/ckeditor5-editor-inline		The inline editor implementation.
@ckeditor/ckeditor5-editor-balloon		The balloon editor (Medium-like) implementation.
@ckeditor/ckeditor5-editor-decoupled		The editor implementation with a decoupled UI.

Themes

Name	Version	Description
@ckeditor/ckeditor5-theme-lark		The Lark theme.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file or https://ckeditor.com/legal/ckeditor-oss-license.